<template>
  <view>
    <view class="login-img">
      <view class="owl-login" :class="hide_eyes && 'password'">
        <view class="hand"></view>
        <view class="hand hand-r"></view>
        <view class="arms">
          <view class="arm"></view>
          <view class="arm arm-r"></view>
        </view>
      </view>
    </view>
    <view class="login-form">
      <form @submit="formSubmit">
        <view class="form-input">
          <input type="text" name="email" placeholder="邮箱" />
        </view>
        <view class="form-input">
          <input type="password" name="password" placeholder="密码" @focus="passwordStatusChange"
            @blur="passwordStatusChange" />
        </view>
        <button type="primary" form-type="submit">登录/注册</button>
      </form>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        hide_eyes: false
      }
    },
    methods: {
      passwordStatusChange() {
        this.hide_eyes = !this.hide_eyes
      },
      async formSubmit(e) {
        let {
          email,
          password
        } = e.detail.value
        let is_email = email.trim().match(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)
        if (is_email && password.trim().length > 5) {
          try {
            let user = await this.$av.loginWithEmail(email, password)
            // console.log(user)	
            uni.showToast({
              title: '登录成功'
            })
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/index/index'
              })
            }, 1500)
          } catch (e) {
            //TODO handle the exception	
            this.$showToast('登录失败')
            console.log(e)
            if (e.code === 210) {
              uni.showModal({
                content: '账密不对',
                showCancel: false,
              })
            } else {
              try {
                let user = await this.$av.registWithEmail(email, password)
                // console.log(user)	
                uni.reLaunch({
                  url: '/pages/index/index'
                })
              } catch (e) {
                //TODO handle the exception	
                this.$showToast('注册失败')
                console.log(e)
              }
            }
          }
        } else {
          this.$showToast('账密不对')
        }
      }
    }
  }
</script>

<style>
  view {
    box-sizing: content-box;
  }

  .login-form {
    margin: -9px 10px 0 10px;
    height: 200px;
    background: #007AFF;
    border-radius: 10px;
    background-color: #EEEEEE;
    box-shadow: 0 2px 10px #9B9B9B;
    padding: 20px;
  }

  .form-input input {
    background: #ffffff;
    border-radius: 5px;
    height: 40px;
    margin: 20px 0;
    padding: 0 10px;
  }

  .login-img {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 108px;
    margin-top: 100rpx;
  }

  .owl-login {
    width: 211px;
    height: 108px;
    background-image: url('');
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
  }

  .owl-login .hand {
    width: 34px;
    height: 34px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    background-color: #472d20;
    transform: scaleY(0.6);
    transition: 0.3s ease-out;
    position: absolute;
    left: 14px;
    bottom: -8px;
  }

  .owl-login .hand.hand-r {
    left: 170px;
  }

  .owl-login .arms {
    top: 58px;
    position: absolute;
    width: 100%;
    height: 41px;
    overflow: hidden;
  }

  .owl-login .arms .arm {
    width: 40px;
    height: 65px;
    position: absolute;
    left: 20px;
    top: 40px;
    background-image: url("");
    background-size: 100%;
    transition: 0.3s ease-out;
    transform: rotate(-20deg);
  }

  .owl-login .arms .arm.arm-r {
    transform: rotate(20deg) scaleX(-1);
    left: 158px;
  }

  .owl-login.password .hand {
    transform: translateX(42px) translateY(-15px) scale(0.7);
  }

  .owl-login.password .hand.hand-r {
    transform: translateX(-42px) translateY(-15px) scale(0.7);
  }

  .owl-login.password .arms .arm {
    transform: translateY(-40px) translateX(40px);
  }

  .owl-login.password .arms .arm.arm-r {
    transform: translateY(-40px) translateX(-40px) scaleX(-1);
  }
</style>
